<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #father{
            width:500px;
            padding:20px;
            background-color: pink;
            margin:50px auto;
        }
        #son{
            width:400px;
            padding:20px;
            background-color: skyblue;
            margin: auto;
        }
    </style>
</head>
<body>
  <div id="app">
    <div id="father" @click.once="fatherShow">
        <div id="son" @click.capture="sonShow">
            <!-- capture事件捕获，从外向内执行，用的很少 -->
            <!-- .stop阻止事件冒泡 prevent阻止默认行为-->
            <input type="button" value="点击" v-on:click.stop="btnShow">
            <a href="http://www.aynu.edu.cn" @click.prevent='del'>删除这个盒子</a>
            <a href="http://www.aynu.edu.cn" @click.prevent.stop='del'>删除这个盒子</a>
            <!-- vue允许把事件修饰符组合搭配使用 -->
          

        </div>
    </div>
  </div>

    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{

            },
            methods : {
                btnShow : function(){
                    console.log('这是按钮的show');
                },
                fatherShow : function(){
                    console.log('这是按钮的fathershow');
                },
                sonShow : function(){
                    console.log('这是按钮的sonshow');
                },
                del:function(){
                    console.log('触发了a链接的删除');
                }
            }
        });
    </script>
</body>
</html>